// 暴露出去一个实例化的 vue-router 的路由实例对象

// 引入 Vue 核心
import Vue from 'vue'

// 引入 vue-router 插件
import VueRouter from 'vue-router'

// 引入定义好的路由组件 views 文件中写的组件 @ => src
import HelloHome from '@/views/HelloHome'
import HelloAbout from '@/views/HelloAbout'
import HelloDetail from '@/views/HelloDetail'
import Hello404 from '@/views/Hello404'

// 注册 vue-router 插件
Vue.use(VueRouter)

// 定义路由规则集合
// const routes = [
//   {
//     // 一条规则
//     path: '/home',
//     component: HelloHome
//   },
//   {
//     // 一条规则
//     path: '/about',
//     component: HelloAbout
//   }
// ]

// 实例化 路由实例对象
const router = new VueRouter({
  // 配置选项

  // 路由规则集合
  routes: [
    {
      // 一条规则, 一条路由信息
      path: '/home',
      name: 'abc', // 命名路由 具有名字的路由 给当前规则取个名字  跳转可以使用 name
      component: HelloHome
    },
    {
      // 一条规则, 一条路由信息
      path: '/about',
      name: 'about', // 命名路由 具有名字的路由 给当前规则取个名字  跳转可以使用 name
      component: HelloAbout
    },
    {
      // #/detail/a/b   能匹配到
      // #/detail/c/d   能匹配到
      // #/detail       不能
      // #/detail/a     不能
      path: '/detail/:id/:name',
      name: 'detail',
      component: HelloDetail
    },
    {
      // ? 可有可无
      // #/detailtwo/a/b   能匹配到
      // #/detailtwo/c/d   能匹配到
      // #/detailtwo       不能
      // #/detailtwo/a     能匹配到
      path: '/detailtwo/:a/:b?',
      name: 'detailtwo',
      component: HelloDetail
    },
    {
      // 通配符 * : 不管路径是什么，都可以匹配这条 * 的规则。
      // 需要放置在最后一条规则，相当于兜底。
      path: '*',
      name: '404',
      component: Hello404
    }
  ]
})

// 暴露
export default router